<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$siteTitle}</title>
<link href="__ADMIN__/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__ADMIN__/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="__ADMIN__/wx/css/default.css">
<script type="text/javascript" src="__ADMIN__/wx/js/ecmall.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMIN__/wx/js/admin.js" charset="utf-8"></script>
<style type="text/css">
.demo{width:620px; margin:30px auto}
.demo p{line-height:32px}
.btnfile{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btnfile input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
.place{height:40px; background:url(__ADMIN__/images/righttop.gif) repeat-x;}
.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__ADMIN__/images/rlist.gif) no-repeat right;}
.placeul li:last-child{background:none;}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$(".click").click(function() {
			$(".tip").fadeIn(200);
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
		});

		$(".sure").click(function() {
			$(".tip").fadeOut(100);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
		});
	});

</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">首页轮播</a></li>
		</ul>
	</div>
	<div class="col_main" style="margin: 20px 50px;">
        	<form action="{:U('addHomeCarousel')}" method="post">
            <div class="main_bd">
                <div class="media_edit_area">
                    <div id="js_appmsg_editor">
                        <div class="appmsg_editor" style="margin-top: 0px;">
                            <div class="inner">
                                <input type="hidden" name="number" id="number" value="{$number}">
	                            
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">首页轮播图</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：640像素 * 220像素）</p>
                                    </label>
                                    <div class="upload_wrap">
                                       	<div class="upload_box">
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span>上传</span>
										            <input id="fileuploadCarousel" type="file" name="carousel_file" multiple>
										        </div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            
	                            <div class="appmsg_edit_item">
                                	<ul id="uploadCarouselContainer">
                                		<if condition="$covers">
                                			<foreach name="covers" item="cover">
                                				<li class="uploadLi" >
						        	          		<input type="hidden" name="carousel_img_name[]" value="{$cover.img_name}">
						        	          		<div class="div_img">
						        	          			<img style="width: 100%" src="__UPLOADS__/Beauty/Cover/{$cover.upload_number}/{$cover.img_name}" />
						        	          		</div>
						        	          	</li>
                                			</foreach>
                                		</if>
                                	</ul>
                                </div>
                        	</div>
                    	</div>
                	</div>
	                <div class="tool_area">
	                    <div class="tool_bar border tc">
	                        <span id="js_submit" class="btn btn_input btn_primary"><button type="submit">保存</button></span>
	                    </div>
	                </div>
            	</div>
        	</div>
        </form>
	</div>
	
	<script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
	
	<script type="text/javascript">
		$(function () {
			$("#fileuploadCarousel").fileupload({
      			url: "{:U('/Admin/Index/uploadCarousel')}",
      			dropZone: null,
      			pasteZone: null,
      			autoUpload: true,
      			limitConcurrentUploads: 5,
      			add: function (e, data) {
      				if (e.isDefaultPrevented()) {
    	                return false;
    	            }

    	            var html = '';
    	            for (var i in data.files) {
    	            	html += '<li class="uploadLi" >'
    	              		+'<div class="div_img">'
    	              			+'<div class="progress">'
									+'<span class="bar"></span><span class="percent">0%</span >'
								+'</div>'
    	              		+'</div>'
    	              	+'</li>';
    	            }
    	            
    	            $('#uploadCarouselContainer').append(html);
    	            data.submit();
      			},
      			formData:{
      				num: $('#number').val()
      			},//如果需要额外添加参数可以在这里添加  
      			done:function(e, result){  
      				console.log(result.content);
      				var completeElem = $(result.content).parents('.uploadLi');
     		        
     		        var data = result.result;
     		        var html = '<li class="uploadLi" >'
     	          		+'<input type="hidden" name="cover_img_name[]" value="'+data[0].name+'">'
     	          		+'<div class="div_img">'
     	          			+'<img style="width: 100%" src="'+data[0].url+'" />'
     	          		+'</div>'
     	          	+'</li>';
     	          	
     		        completeElem.replaceWith(html);
      			},
      		    progress: function (e, data) {
      		    	var files = data.originalFiles;
    		    	var file = data.files [0];
    		    	var index;
    		    	for (var i in files) {
    		    		if (files [i].name == file.name) {
    		    			index = i;
    		    		}
    		    	}
    		    	
    		    	var $progressElems = $('#uploadCarouselContainer').find('.progress');
    		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
    		    	var progressElem = $progressElems.eq(index);
    		    	data.content = progressElem;
    		    	progressElem.find('.bar').attr('style', 'width:'+progress + '%');
    		    	progressElem.find('.percent').text(progress + '%');
      		    }
      		});
		});
	</script>
</body>
</html>